<script setup>
import HomePanel from './HomePanel.vue'
import { getGoodsAPI } from '@/apis/home'
import { onMounted, ref, watch } from 'vue'
import GoodsItem from './GoodsItem.vue'
import HomeSelect from './HomeSelect.vue'
import { useshopProduct } from '@/stores/shopProduct'
import CarButton from '@/components/CartButton/index.vue'

const shopProduct = useshopProduct()
// 获取数据列表
</script>

<template>
	<div class="home-product">
		<HomeSelect />
		<div class="homeProduct-skuList">
			<HomePanel v-for="(item, index) in shopProduct.goodsProduct" :key="index" :shopData="item"> </HomePanel>
			<div v-if="shopProduct.goodsProduct.length === 0" class="skuList-empty">
				<el-empty description="暂无此类商品" :image-size="300" />
			</div>
		</div>
		<div class="homeProduct-pagination">
			<el-pagination
				:page-size="20"
				size="large"
				background
				layout="prev, pager, next"
				:total="shopProduct.totalNum"
				v-model:current-page="shopProduct.pageNum"
			/>
		</div>
		<CarButton />
	</div>
</template>

<style scoped lang='scss'>
.home-product {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 160px;
	box-sizing: border-box;
	.homeProduct-skuList {
		display: flex;
		flex-wrap: wrap;
		/* justify-content: space-between; */
		margin-top: 40px;
		.skuList-empty {
			margin: 0 auto;
		}
	}
	.homeProduct-pagination {
		width: 1310px;
		display: flex;
		margin: 0 0 0 auto;
		justify-content: end;
		align-items: end;
		border-top: 1px solid #f4f4f4;
		height: 80px;
		margin-bottom: 113px;
		--el-color-white: rgba(195, 13, 35, 1);
		--el-pagination-button-height-large: 48px;
		--el-pagination-button-width-large: 48px;
	}
	.carList-button {
		cursor: pointer;
		width: 65px;
		height: 65px;
		background: #c30d23;
		border-radius: 0px 0px 0px 0px;
		position: fixed;
		top: calc((100% - 500px) / 2);
		right: 0;
		line-height: 65px;
		text-align: center;
		color: #ffffff;
		z-index: 999;
	}
}
:deep(.el-pagination) {
	--el-pagination-hover-color: rgba(195, 13, 35, 0.2) !important;
	.is-active {
		background-color: rgba(195, 13, 35, 0.2) !important;
	}
}
</style>